{include file="public/layout" /}
<script type="text/javascript" src="__PUBLIC__/plugins/Echarts/echarts.min.js"></script>
<link href="__SKIN__/css/main_new.css?v={$version}" rel="stylesheet" type="text/css">
<body style="overflow: auto; cursor: default; -moz-user-select: inherit;background-color:#F4F4F4; padding: 10px; ">
    <div id="append_parent"></div>
    <div id="ajaxwaitid"></div>
    {include file="shop/left" /}
    <div class="page" >
        <div class="flexigrid">
            <div class="mDiv">
                <div class="ftitle">
                    <h3>数据统计</h3>
                </div>
            </div>
            <div class="list-stats">
                <div class="stats-con">
                    开始日期 &nbsp;<input type="text" class="input-txt" id="add_time" name="add_time" value="{$StartTime|date='Y-m-d H:i:s',###}" autocomplete="off">
                    结束日期 &nbsp;<input type="text" class="input-txt" id="add_time2" name="add_time" value="{$EndTime|date='Y-m-d H:i:s',###}" autocomplete="off">
                    &nbsp; &nbsp;
                    <a href="javascript:void(0);" onclick="TimeProcessing(this, null, null, 1);">一个月</a>
                    &nbsp; &nbsp;
                    <a href="javascript:void(0);" onclick="TimeProcessing(this, null, null, 3);">三个月</a>
                    &nbsp; &nbsp;
                    <a href="javascript:void(0);" onclick="TimeProcessing(this, null, null, 6);">六个月</a>
                    &nbsp; &nbsp;
                    <a href="javascript:void(0);" onclick="TimeProcessing(this, null, null, 9);">九个月</a>
                    &nbsp; &nbsp;
                    <a href="javascript:void(0);" onclick="TimeProcessing(this, null, null, 12);">一年</a>
                </div>
                <script type="text/javascript">
                    layui.use('laydate', function() {
                        var laydate = layui.laydate;
                        laydate.render({
                            elem: '#add_time', type: 'datetime',
                            change: function(value, date, endDate) {
                                // TimeProcessing(value);
                            },
                            done: function(value, date, endDate){
                                TimeProcessing(null, value);
                            }
                        });

                        laydate.render({
                            elem: '#add_time2', type: 'datetime',
                            change: function(value, date, endDate) {
                                // TimeProcessing(null, null, value);
                            },
                            done: function(value, date, endDate){
                                TimeProcessing(null, null, value);
                            }
                        });
                    });

                    // 处理时间并查询数据
                    function TimeProcessing(obj, Start, End ,Year) {
                        Start = Start ? Start : $('#add_time').val();
                        End   = End ? End : $('#add_time2').val();
                        if (!Year && Start && End) {
                            if (End < Start) {
                                $('body').click();
                                layer.msg('结束日期不可早于开始日期', {icon: 2,time: 2000});
                                return false;
                            }
                            Year = 0;
                        }
                        if ((!End || !Start) && !Year) return false;
                        
                        var Url = "{:url('Statistics/GetTimeCycletData')}";
                        $.ajax({
                            url  : Url,
                            type : 'post',
                            data : {StartNew:Start, EndNew:End, Year:Year, _ajax:1},
                            dataType : 'json',
                            success : function(res){
                                layer.closeAll();
                                $('#UsersNum').empty().html(res.data.UsersNum);
                                $('#PayOrderNum').empty().html(res.data.PayOrderNum);
                                $('#OrderSales').empty().html(res.data.OrderSales);
                                $('#ProductNum').empty().html(res.data.ProductNum);
                                $('#OrderUsersNum').empty().html(res.data.OrderUsersNum);
                                $('#UsersRecharge').empty().html(res.data.UsersRecharge);
                                if (res.data.Start) $('#add_time').val(res.data.Start);
                                if (res.data.End) $('#add_time2').val(res.data.End);
                                if (obj) {
                                    $('.stats-con a').css('color', '');
                                    $(obj).css('color', 'red');
                                }
                            }
                        });
                    }
                </script>

                <ul class="stats2">
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-user"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>用户数量</h1>
                                <p><cite id="UsersNum">{$CycletData.UsersNum}</cite></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-shopping-cart"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>付款订单数</h1>
                                <p><cite id="PayOrderNum">{$CycletData.PayOrderNum}</cite></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-cubes"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>商品数量</h1>
                                <p><cite id="ProductNum">{$CycletData.ProductNum}</cite></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-group"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>消费人数</h1>
                                <p><cite id="OrderUsersNum">{$CycletData.OrderUsersNum}</cite></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-rmb"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>付款订单总额</h1>
                                <p><cite id="OrderSales">{$CycletData.OrderSales}</cite></p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="card_box">
                            <div class="car_box_l fl">
                                <i class="card-icon fa fa-rmb"></i>
                            </div>
                            <div class="car_box_r fl">
                                <h1>用户充值总额</h1>
                                <p><cite id="UsersRecharge">{$CycletData.UsersRecharge}</cite></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="page mt10">
        <div class="flexigrid">
            <div class="mDiv">
                <div class="ftitle">
                    <h3>近七日交易走势</h3>
                </div>
            </div>
            <div class="list-stats">
                <div class="stats-con">
                    <div id="stats-box" style="width:90%;height:400px;margin: 0 auto;"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="stats-content">
        <div class="stats-content-l fl">
            <div class="flexigrid">
                <div class="mDiv">
                    <div class="ftitle">
                        <h3>商品销售榜</h3>
                    </div>
                </div>
                <div class="list-stats">
                    <div class="stats-con">
                        <table border="" cellspacing="" cellpadding="" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th class="w100 tc">
                                        <div>排名</div>
                                    </th>
                                    <th class="">
                                        <div>商品</div>
                                    </th>
                                    <th class="w100 tc">
                                        <div>销量</div>
                                    </th>
                                    <th class="w100 tc">
                                        <div>销售额</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="$OrderSalesList" id="vo"}
                                    <tr>
                                        <td>
                                            <div class="tc">
                                                {lt name="$i" value="4"}
                                                    <img src="__ROOT_DIR__/public/static/admin/images/0{$i}.png">
                                                {else/}
                                                    {$i}
                                                {/lt}
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <a href="{:url('ShopProduct/edit', ['id'=>$vo.aid])}">{$vo.title}</a>
                                                <a href="{$vo.arcurl}" target="_blank" style="color: red;">[预览]</a>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="tc">{$vo.sales_num}</div>
                                        </td>
                                        <td>
                                            <div class="tc">{$vo.sales_amount}</div>
                                        </td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
        <div class="stats-content-r fr">
            <div class="flexigrid">
                <div class="mDiv">
                    <div class="ftitle">
                        <h3>用户消费榜</h3>
                    </div>
                </div>
                <div class="list-stats">
                    <div class="stats-con">
                        <table border="" cellspacing="" cellpadding="" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th class="w100 tc">
                                        <div>排名</div>
                                    </th>
                                    <th class="">
                                        <div>用户昵称</div>
                                    </th>
                                    <th class="w100 tc">
                                        <div>实际消费金额</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {volist name="$UserConsumption" id="vo"}
                                    <tr>
                                        <td>
                                            <div class="tc">{lt name="$i" value="4"}<img src="__ROOT_DIR__/public/static/admin/images/0{$i}.png">{else/}{$i}{/lt}</div>
                                        </td>
                                        <td>
                                            <div>{$vo.nickname}</div>
                                        </td>
                                        <td>
                                            <div class="tc">{$vo.amount}</div>
                                        </td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        try{
            if (typeof(eval('is_conceal_1649209614'))=="function" && is_conceal_1649209614()){
                $(".page").css("margin-left","");
                $(".page").css("min-width","");
                $(".stats-content").css("min-width","");
                $(".stats-content").css("margin-left","");
                $(".stats-content").css("width","");
            }else{
                $(".page").css("margin-left","100px");
                $(".page").css("min-width","auto");
                $(".stats-content").css("display","flow-root");
                $(".stats-content").css("margin-bottom","auto");
                $(".stats-content").css("min-width","20px");
                $(".stats-content").css("margin-left","100px");
                $(".stats-content").css("width","calc(100% - 100px)");
            }
        }catch(e){}
        function getBeforeDate(n) {
            var n = n;
            var d = new Date();
            var year = d.getFullYear();
            var mon = d.getMonth() + 1;
            var day = d.getDate();
            if(day <= n) {
                if(mon > 1) {
                    mon = mon - 1;
                } else {
                    year = year - 1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate() - n);
            year = d.getFullYear();
            mon = d.getMonth() + 1;
            day = d.getDate();
            s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
            return s;
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('stats-box'));

        // 指定图表的配置项和数据
        var option = {
            color: ['#3398DB', '#6be6c1'],
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['成交量', '成交额']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)],
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#eee'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#eee'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                    name: '成交量',
                    type: 'line',
                    data: ['{$DealNum.0}','{$DealNum.1}','{$DealNum.2}','{$DealNum.3}','{$DealNum.4}','{$DealNum.5}','{$DealNum.6}'],
                },
                {
                    name: '成交额',
                    type: 'line',
                    data: ['{$DealAmount.0}','{$DealAmount.1}','{$DealAmount.2}','{$DealAmount.3}','{$DealAmount.4}','{$DealAmount.5}','{$DealAmount.6}'],
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    {include file="public/footer" /}
</body>